<template>
  <div class="e-box">
    <!-- <div class="select">
      <el-select v-model="language" @change="changeLanguage">
        <el-option value="html">HTML</el-option>
        <el-option value="javascript">javascript</el-option>
        <el-option value="css">css</el-option>
        <el-option value="go">go</el-option>
      </el-select>
    </div> -->
    <div id="codeEditBox"></div>
    <!-- <div class="submit">
      <el-button type="primary" :loading="loading">提交</el-button>
    </div> -->
    <!-- <div class="sub-box">
     编译结果： {{msg}}
    </div> -->
  </div>
</template>

<script setup>
import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker'
import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker'
import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
import * as monaco from 'monaco-editor';
import { nextTick,ref,onBeforeUnmount,onMounted,reactive } from 'vue'
// import {useRoute} from 'vue-router'
 
// import {ElMessage} from 'element-plus'
const text = ref()
// const route=useRoute()
const language=ref('javascript')

const {content} = defineProps({
  content: {
    type: String,
    default: "function hello() {\n\talert('Hello world!');\n}"
  }
})
// text.value = content.replaceAll('				','')
text.value = content

// console.log('默认值为：',text.value)
onBeforeUnmount(()=>{
  editor.dispose() 
})
// @ts-ignore
self.MonacoEnvironment = {
  getWorker(_, label) {
    if (label === 'json') {
      return new jsonWorker()
    }
    if (label === 'css' || label === 'scss' || label === 'less') {
      return new cssWorker()
    }
    if (label === 'html' || label === 'handlebars' || label === 'razor') {
      return new htmlWorker()
    }
    if (['typescript', 'javascript'].includes(label)) {
      return new tsWorker()
    }
    return new EditorWorker()
  },
}
let editor

const editorInit = () => {
  nextTick(()=>{
    monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
      noSemanticValidation: true,
      noSyntaxValidation: false
    });
    monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
      target: monaco.languages.typescript.ScriptTarget.ES2016,
      allowNonTsExtensions: true
    });
    
    editor = monaco.editor.create(document.getElementById('codeEditBox'), {
      value:text.value, // 编辑器初始显示文字
      language: 'javascript', // 语言支持自行查阅demo
      automaticLayout: true, // 自适应布局  
      theme: 'vs-dark', // 官方自带三种主题vs, hc-black, or vs-dark
      foldingStrategy: 'indentation', // 代码可分小段折叠
      renderLineHighlight: 'all', // 行亮
      selectOnLineNumbers: true, // 显示行号
      // autoIndent: 'advanced', // 'none' | 'keep' | 'brackets' | 'advanced' | 'full';
      minimap:{
        size: 'fill',
        // enabled: true,
      },
      readOnly: false, // 只读
      fontSize: 16, // 字体大小
      scrollBeyondLastLine: false, // 取消代码后面一大段空白 
      overviewRulerBorder: false, // 不要滚动条的边框  
    })
    // editor.setValue("");
    // console.log(editor)
    // 监听值的变化
    editor.onDidChangeModelContent((val) => {
      text.value = editor.getValue()
    })
  })
}
onMounted(() => {
  editorInit()
})


//切换语言
const changeLanguage=()=>{
  monaco.editor.setModelLanguage(editor.getModel(), language.value)   
}

//设置一个确认按钮，点击时调用接口
const submitCode= ()=> {
  // loading.value=true
  // return editor.getValue()
  return text.value
}

defineExpose({ submitCode })
</script>

<style scoped lang="less">
#codeEditBox {
  //  width: 100%;
  // height: 50%;
  flex: 1;
}
// .select{
//   // padding: 10px 0;
//   height: 50px;
//   box-sizing: border-box;
// }
.submit{
  text-align: center;
  padding: 10px 0;
}
.e-box{
  width: 100%;
  // padding-top: 40px ;
  box-sizing: border-box;
  height: 100%;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  flex-direction: column;
}
.sub-box{
  border-radius: 10px;
  background-color: #999;
  padding: 10px;
  box-sizing: border-box;
  flex: 1;
  color: white;
}
</style>